﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>账号列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/css/global.css" media="all">
    <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/table.css"/>
    <style type="text/css">
    .searcheBottom{margin-bottom: 10px;}
    </style>
</head>

<body>
<div class="admin-main">
    <blockquote class="layui-elem-quote">
        <div class="demoTable">
         <div class="layui-inline searcheBottom">
            搜索关键词：
            <div class="layui-inline">
                <input id="SEARCH_ID" class="layui-input" name="id" autocomplete="off" placeholder="用户名称"/>
            </div>
            </div>
             <div class="layui-inline searcheBottom">
            状态：
            <div class="layui-inline">
                <select  id="SEARCH_STATUS_ID" name="status" class="layui-input" style="padding: 0px 20px;">
                    <option value="" selected>---请选择---</option>
                    <option value="1">正常</option>
                    <option value="0">禁用</option>
                </select>
            </div>
            </div>
             <div class="layui-inline searcheBottom">
            <div class="layui-inline">
                <label class="layui-form-label">创建时间:</label>
                <div class="layui-input-inline">
                    <input id="SEARCH_STATUS_STARTTIME" class="layui-input" name="startTime" placeholder="开始时间">
                </div>
                <div class="layui-input-inline">
                    &nbsp;-&nbsp;
                </div>
                <div class="layui-input-inline">
                    <input id="SEARCH_STATUS_ENDTIME" class="layui-input" name="endTime" placeholder="截止时间">
                </div>
            </div>
        </div>
        <div class="layui-inline searcheBottom">
         <button class="layui-btn" data-type="reload" id="search" >搜索</button>
            <button class="layui-btn layui-btn-primary" onclick="resetSearch()">重置</button>
            <a data-opt="add" href="/manage/account/addAccountPage" class="layui-btn"><i class="layui-icon">&#xe608;</i>新增账号</a>
        </div>
        </div>
    </blockquote>
            <span style="font-size: 16px;"><b>账号列表</b></span>
                <table class="layui-hide" id="tableID" lay-filter="tableFilter"></table>
</div>


<script type="text/javascript" src="/plugins/layui/layui.js"></script>
<script type="text/javascript" src="/js/global-config.js"></script>
<script>
    layui.config({
        base: '/js/'
    });

    function resetSearch() {
        SEARCH_ID.value = '';
        SEARCH_STATUS_ID.value = '';
        SEARCH_STATUS_STARTTIME.value = '';
        SEARCH_STATUS_ENDTIME.value = '';
    }

    layui.use(['form', 'laydate','table','laydate','util'], function () {
    	var $ = layui.jquery,
        form = layui.form,
        table = layui.table,//表格
        laydate = layui.laydate,//日期
        util = layui.util;//工具类

        var start = {
            max: '2099-06-16 23:59:59',
            format: 'yyyy-MM-dd HH:mm:ss',
            type: 'datetime',
            value: new Date(),
            show: true
            ,done: function(value){
                end.min = value; //开始日选好后，重置结束日的最小日期
                end.start = value //将结束日的初始值设定为开始日
            }
        };
        var end = {
            max: '2099-06-16 23:59:59',
            format: 'yyyy-MM-dd HH:mm:ss',
            type: 'datetime',
            value: new Date(),
            show: true
            ,done: function(value){
                start.max = value; //结束日选好后，重置开始日的最大日期
            }
        };

        $('#SEARCH_STATUS_STARTTIME').bind('click',function (){
            start.elem = this;
            start.closeStop = this
            laydate.render(start);
        });
        $('#SEARCH_STATUS_ENDTIME').bind('click',function (){
            end.elem = this;
            end.closeStop = this
            laydate.render(end);
        });
        
        pageInit();
        //执行一个 table 实例
        function pageInit(){
      	   table.render({
                 elem: '#tableID'
                 ,url:'/manage/account/rest/accountList'
                 ,method: 'post'
                 ,cols: [[
                     {field:'id', title: 'ID', sort: true}
                     ,{field:'userName', title: '用户名'}
                     ,{field:'nickName', title: '昵称'}
                     ,{field:'roles', title: '角色'}
                     ,{field:'status', title: '状态',templet: function(d){
                  	   if(d.status==0){ return '<div class="layui-btn layui-btn-danger layui-btn-xs">禁用</div>'}
  	                      else if(d.status==1){ return '<div class="layui-btn layui-btn-xs">正常</div>'}
  	                      else { return ''}
                     }}
                     ,{field:'createTime', title: '创建时间',width:180, sort: true,templet: function(d){
                         if(d.createTime !=null){
                             return util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss');
                         }else {
                             return '';
                         }
                     }}
                     ,{title: '操作', align:'left',width:240,
                       templet:function(d){
                            var tool = '<a href="/manage/account/accountDetail?id='+d.id+'" class="layui-btn layui-btn-primary layui-btn-xs">查看</a>'
                                        +'<a href="/manage/account/editAccountPage?id='+d.id+'" class="layui-btn layui-btn-xs">编辑</a>';
                  	        if(d.status==0){
                                tool +='<a class="layui-btn layui-btn-xs" lay-event="change">恢复</a>';
   		 	    	        }else{
   		 	    		        tool +='<a class="layui-btn layui-btn-xs  layui-btn-warm" lay-event="change">禁用</a>';
   		 	    	        }
                            return tool+='<a class="layui-btn layui-btn-xs layui-btn-normal" href="/manage/account/setAccountRole?id='+d.id+'">角色分配</a>';
                     }
                 }
                 ]]
                 ,page: true
             });
        }
        
      //监听工具条
        table.on('tool(tableFilter)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            var editBoxIndex = -1;
            if(layEvent === 'change'){
            	var id = data.id;
                var status = data.status;
                if (status == 0) {
                    status = 1;
                } else if (status == 1) {
                    status = 0;
                }
                //配置一个透明的询问框
                layer.confirm('确定要设置吗?', {
                    btn : [ '确定', '取消' ]//按钮
                }, function(index) {
                    $.ajax({
                        cache: true,
                        type: "GET",
                        url: "/manage/account/rest/updateStatus",
                        data: "id="+id+"&status="+status,
                        async: false,
                        error: function () {
                            layer.close(index);
                            alert("Connection error");
                        },
                        success: function (data) {
                            layer.close(index);
                            table.reload("tableID");
                        }
                    });
                });
            }
        });
        var $ = layui.$, active = {
                reload: function(){
                    //执行重载
                    table.reload('tableID', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            find : SEARCH_ID.value,
                            status : SEARCH_STATUS_ID.value,
                            startTime : SEARCH_STATUS_STARTTIME.value,
                            endTime : SEARCH_STATUS_ENDTIME.value
                        }
                    });
                }
            };

            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            $(".layui-input").keydown(function (e) {
                if(e.keyCode == 13){
                    $('#search').click();
                }
            });
    });
</script>
</body>

</html>